<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动设备优先：添加响应式布局-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 文件 -->
    <link th:href="@{/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/plugins/sweetalert/css/sweetalert.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/plugins/dropzone/css/basic.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/plugins/dropzone/css/dropzone.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/plugins/sweetalert/css/sweetalert.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/plugins/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet" crossorigin="anonymous">
    <!--动画样式-->
    <link th:href="@{/plugins/animate/animate.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/css/main.css}" rel="stylesheet" crossorigin="anonymous">
    <title>用户管理-登录</title>
</head>
<body>
<div class="message" id="message"></div>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light menu">
            <a class="navbar-brand" href="#">
                <img class="logo" th:src="@{/assets/logo.jpg}" width="40" height="40"/>
                <span>用户管理系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarScroll">
                <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" th:href="@{'#'}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">学生管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">教师管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">角色管理</a>
                    </li>
                    <li class="nav-item dropdown text-end">

                    </li>
                </ul>
                <div class="nav-item dropdown text-end">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        个人中心
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#">基本信息</a></li>
                        <li><a class="dropdown-item" href="#">修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">注销登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<div class="main">
    <div class="container">
        <form class="search">
            <div class="row ">
                <div class="input-inline col col-4 col-md-3">
                    <input type="text" class="form-control" placeholder="姓名" name="realName" aria-label="" autocomplete="off">
                </div>
                <div class="input-inline col col-4 col-md-3">
                    <input type="text" class="form-control" placeholder="用户名" name="username" aria-label="" autocomplete="off">
                </div>
                <div class="input-inline col col-4 col-md-3">
                    <select class="form-select" name="clazz" aria-label="">
                        <option selected>请选择班级</option>
                        <option value="1">数科201</option>
                        <option value="2">数科202</option>
                        <option value="3">数科203</option>
                    </select>
                </div>
                <div class="input-inline col col-4 col-md-3">
                    <input type="email" class="form-control" placeholder="邮箱" name="email" aria-label="" autocomplete="off">
                </div>
                <div class="input-inline col col-4 col-md-3">
                    <input type="text" class="form-control" placeholder="手机号" name="phone" aria-label="" autocomplete="off">
                </div>

                <div class="input-inline col col-4 col-md-3">
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input" name="gender" id="gender-1" checked value="1">
                        <label class="form-check-label" for="gender-1">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input" name="gender" id="gender-2" checked value="2">
                        <label class="form-check-label" for="gender-2">女</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input" name="gender" id="gender-3" checked value="0">
                        <label class="form-check-label" for="gender-3">保密</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto me-auto input-inline">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">添加用户</button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fileUpload">批量导入</button>
                    <button type="button" class="btn btn-danger deleteAll" data-target="tableData">删除选中</button>
                </div>
                <div class="col-auto">
                    <div class="input-inline">
                        <button type="submit" class="btn btn-primary">搜索</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="table-responsive">
                <table class="table table-hover table-bordered text-center checkbox" id="tableData">
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">姓名</th>
                        <th scope="col">学号</th>
                        <th scope="col">性别</th>
                        <th scope="col">年龄</th>
                        <th scope="col">用户名</th>
                        <th scope="col">邮箱</th>
                        <th scope="col">手机号</th>
                        <th scope="col">班级</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="1">
                        <td>1</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="2">
                        <td>2</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="3">
                        <td>3</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="4">
                        <td>4</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="5">
                        <td>5</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="6">
                        <td>6</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="7">
                        <td>7</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="8">
                        <td>8</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    <tr id="9">
                        <td>9</td>
                        <td>张炎峰</td>
                        <td>10001</td>
                        <td>男</td>
                        <td>27</td>
                        <td>闲云野鹤</td>
                        <td>2774544@qq.com</td>
                        <td>13526808888</td>
                        <td>数应152</td>
                        <td>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav class="table-pagination text-center">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled previous">
                            <a class="page-link">上一页</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item next">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- 添加用户 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalLabel">添加用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="g-3" novalidate id="registerForm" onsubmit="return validate(this)">
                    <div class="mb-3 form-floating">
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" onblur="validateUsername(this)" autocomplete="off" value="aaaa">
                        <label for="username" class="form-label">用户名</label>
                    </div>
                    <div class="mb-3 form-floating">
                        <input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email" onblur="validateEmail(this)"  autocomplete="off" value="aaaa@qq.com">
                        <label for="email" class="form-label">邮箱</label>
                    </div>
                    <div class="mb-3 form-floating">
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" onblur="validatePassword(this)" autocomplete="off" value="aaZZ11">
                        <label for="password" class="form-label">密码</label>
                    </div>
                    <div class="mb-3 form-floating">
                        <input type="password" class="form-control" id="confirmPassword" placeholder="请确认密码" name="confirmPassword" rel="password" onblur="validateConfirmPassword(this)" autocomplete="off" value="aaZZ11">
                        <label for="confirmPassword" class="form-label">确认密码</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 文件上传 -->
<div class="modal fade" id="fileUpload" tabindex="-1" aria-labelledby="addModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form action="#" class="dropzone" id="dropzoneForm">
                </form>
            </div>
        </div>
    </div>
</div>
<button id="alert-info" class="btn btn-primary">信息</button>
<button id="alert-success" class="btn btn-success">成功</button>
<button id="alert-warning" class="btn btn-warning">警告</button>
<button id="alert-danger" class="btn btn-danger">错误</button>

</body>
<!--引入JQuery-->
<script th:src="@{/js/jquery-2.2.4.min.js}" crossorigin="anonymous"></script>
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
<!--弹层组件 sweetalert-->
<script th:src="@{/plugins/sweetalert/js/sweetalert.min.js}" crossorigin="anonymous"></script>
<!--文件上传组件-->
<script th:src="@{/plugins/dropzone/js/dropzone.min.js}" crossorigin="anonymous"></script>
<!--表单校验-->
<script th:src="@{/js/validate.min.js}" crossorigin="anonymous"></script>
<!--表格自动添加复选框-->
<script th:src="@{/js/tableCheckbox.min.js}" crossorigin="anonymous"></script>
<script>
    function message(options) {
        const types = ['success','error','warning','info']
        let opt = {
            message: 'info', //消息内容
            type: 'info', //消息类型
            close: false, //是否显示关闭按钮
            duration: 3, //自动关闭时间间隔：单位s
            center: false //是否居中
        }
        if( typeof  options === 'string' || typeof  options === 'number'){
            opt.message = options
        }
        if(typeof options === 'object'){
            opt.message = options.message || 'info'
            if(types.indexOf(options.type) > -1) opt.type = options.type
            if(typeof options.close === 'boolean') opt.close = options.close
            if(typeof options.center === 'boolean') opt.center = options.center
            if(typeof options.duration === 'number') opt.duration = options.duration
        }
        const wrapper = $("div.message")
        const id = 'msg-'+randomNum(10)
        let html = '<div id="'+id+'" class="alert alert-' + opt.type + ' alert-dismissible'
        if(opt.center) html+=' message-center'
        html+='" role="alert">'
        if(opt.type === 'success')  html+= '<i class="bi bi-check-circle-fill"></i>'
        if(opt.type === 'info')  html+= '<i class="bi bi-info-circle-fill"></i>'
        if(opt.type === 'warning')  html+= '<i class="bi bi-exclamation-circle-fill"></i>'
        if(opt.type === 'error')  html+= '<i class="bi bi-x-circle-fill"></i>'
        html+=opt.message
        if(opt.close) html+='<i class="bi bi-x message-close"></i>'
        html+='</div>'
        wrapper.append(html)
        const $alert = $('#'+id)
        if(opt.duration){
            setTimeout(()=>{
                $alert.addClass('messageOut')
            },(opt.duration-0.5)*1000)
            setTimeout(()=>{
                $alert.remove()
            },opt.duration*1000)
        }
        $alert.children('i.message-close').click(function () {
            setTimeout(()=>{
                $alert.remove()
            },500)
            $alert.addClass('messageOut')
        })
    }
    $(document).ready(function(){
        dropdownOpen();
    });
    function dropdownOpen() {
        const $dropdownLi = $('.nav-item.dropdown');
        $dropdownLi.mouseover(function() {
            $(this).children().addClass('show');
        }).mouseout(function() {
            $(this).children().removeClass('show');
        })
    }
    $(document).ready(function () {
        /*设置主题部分的上边距*/
        $(".main").css("padding-top",$(".header").height());

        /*以下代码只是测试消息样式*/
        $('#alert-danger').click(function (){
            message({
                message: "哈哈啊哈哈哈哈",
                type: 'error',
                close: true,
                center:true
            })
        })
        $('#alert-info').click(function (){
            message({
                message: "哈哈啊哈哈哈哈",
                type: 'info',
                close: true
            })
        })
        $('#alert-success').click(function (){
            message({
                message: "哈哈啊哈哈哈哈",
                type: 'success',
                close: true
            })
        })
        $('#alert-warning').click(function (){
            message({
                message: "哈哈啊哈哈哈哈",
                type: 'warning',
                close: true
            })
        })

        $('button.deleteAll').click(function (){
            const target = $(this).attr('data-target')
            const checked = $("table[id='"+target+"']").find('tr.checked')
            let ids = []
            Array.prototype.slice.call(checked).forEach((ele,index)=>{
                ids.push($(ele).attr('id'))
            })
            console.log(ids.toString())
        })
    })
</script>
<script>
    Dropzone.options.dropzoneForm = { // camelized version of the `id`
        URL: '',
        paramName: "file", // The name that will be used to transfer the file
        maxFiles: 2,
        maxFilesize: 2, // MB
        autoProcessQueue: true, //默认为true，即拖入文件立即自动上传；
        acceptedFiles: ".xls,.xlsx", //允许上传的文件类型，文件扩展名以逗号隔开
        dictDefaultMessage: "<strong>拖入要上传的文件. </strong></br>可以点击上传或者拖拽上传",
        success: function () {
            message("上传成功")
        }
    };
</script>
</html>